<template>
  <view class="work-container">
    <view class="card">
      <u-grid  :border="false" @click="click">
        <u-grid-item  :customStyle="{paddingTop:50+'rpx'}" v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
          <u-icon  :name="baseListItem.name" :size="40"></u-icon>
          <text class="text">{{ baseListItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="card">
      <u-grid :border="false" @click="click2">
        <u-grid-item  :customStyle="{paddingTop:50+'rpx'}" v-for="(baseListItem, baseListIndex) in baseList2" :key="baseListIndex">
          <u-icon  :name="baseListItem.name" :size="40"></u-icon>
          <text class="text">{{ baseListItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="card">
      <u-grid :border="false" @click="click3">
        <u-grid-item  :customStyle="{paddingTop:50+'rpx'}" v-for="(baseListItem, baseListIndex) in baseList3" :key="baseListIndex">
          <u-icon  :name="baseListItem.name" :size="40"></u-icon>
          <text class="text">{{ baseListItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseList: [{
        name: '/static/images/daiban.png',
        title: '待办'
      },
      {
        name: '/static/images/yiban.png',
        title: '已办'
      }
      ],
      baseList2: [{
        name: '/static/images/yinhuanshangbao.png',
        title: '隐患上报'
      },
      {
        name: '/static/images/yinhuanzhenggai.png',
        title: '隐患整改'
      },
      {
        name: '/static/images/yinhuanzhenggai.png',
        title: '违章上报'
      }
      ],
      baseList3: [{
        name: '/static/images/banzhuhuodong.png',
        title: '班组活动'
      },
      {
        name: '/static/images/peixunrenwu.png',
        title: '培训任务'
      },
      {
        name: '/static/images/zhishiku.png',
        title: '知识库'
      },
      {
        name: '/static/images/tiku.png',
        title: '题库'
      }
      ],
      current: 0,
      swiperDotIndex: 0,
    }
  },
  methods: {
    click(name) {
           console.log(name)
     },
     click2(name) {
           console.log(name)
     },
     click3(name) {
      switch (name) {
        case '班组活动':
          this.$router.push({ path: '/banzhuhuodong' });
          break;
      }
           console.log(name)
     },
  }
}
</script>

<style lang="scss">
 
.work-container {
  background-color: #F0F2F9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: #fff;
  width: 90%;
  height: 360rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20rpx;
  border-radius: 20rpx;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

/* #endif */
.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}
</style>
